<template>

  <div>
    <el-header style="width: 100%" >
      <!--          :default-active="this.$route.path"不能加这行代码会导致nginx加载不出来-->
      <el-menu
          router
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
      >
        <!--        <el-menu-item index="0"> 需要将index改变-->
        <el-menu-item>
          <img
              style="width: 100px"
              src="@/assets/img/logo.png"
              alt="Element logo"
          />
          <!--            flex-grow-->
        </el-menu-item>
        <div class="flex-grow" />
        <img v-if="user.data[0].role==='Root'" src="@/assets/img/root.png"  style="width: 60px; border-radius: 50%">
        <img v-if="user.data[0].role==='Student'" :src="user.data[0].avatar" style="width: 60px; border-radius: 50%">
        <img v-if="!user.data[0].avatar" src="@/assets/img/student.png" style="width: 60px; border-radius: 50%">

        <el-menu-item index="1">欢迎
          <span v-if="user.data[0].role==='Root'">管理员</span><span v-if="user.data[0].role==='Student'">客户</span>
        </el-menu-item>


        <el-sub-menu >
          <template #title style="width: 30px">{{user.data[0].name}}</template>
          <el-menu-item style="padding-left: 40%">设置</el-menu-item>
          <el-menu-item index="/" style="padding-left: 35%">退出登录</el-menu-item>

        </el-sub-menu>



      </el-menu>
      <!--        <i   style="width: 40px; margin-top: 10px ;" @click="handleCollapse" >123</i>-->

    </el-header >

    <el-container>
      <el-aside  style="width: 200px;background-color:#545c64 " >
        <el-row class="tac" >
          <el-col :span="12" >
            <el-menu
                active-text-color="#ffd04b"
                background-color="#545c64"
                class="el-menu-vertical-demo"
                default-active="this.$route.path"
                text-color="#fff"
                :default-openeds="['1']"
                @open="handleOpen"
                @close="handleClose"
                router
                style="width: 199px"
            >
              <el-sub-menu index="1" >
                <template #title>
                  <el-icon><location/></el-icon>
                  <span>菜单</span>
                </template>
                <el-sub-menu index="1-1" v-if="user.data[0].role==='Root'">
                  <template #title >系统选项</template>
<!--                  <el-menu-item index="/home">系统首页</el-menu-item>-->
<!--                  <el-menu-item index="/course">课程管理</el-menu-item>-->
                  <el-menu-item index="/user">用户管理</el-menu-item>
                  <el-menu-item index="/Course">第三方管理平台</el-menu-item>
                  <el-menu-item
                      index="external-report"
                      @click="handleReportClick"
                  >
                    数据产品调用量报表
                  </el-menu-item>

                </el-sub-menu>
                <el-sub-menu index="1-4" >
                  <template #title>客户选项</template>
                  <el-menu-item index="/Course">第三方管理平台</el-menu-item>
                </el-sub-menu>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>





      <!--主体-->
      <el-main class="el-main">
        <router-view> </router-view>
      </el-main >



    </el-container>






  </div>




</template>

<script setup>

const user =JSON.parse(localStorage.getItem('student-user')||'{}')

// const logout =()=>{
//   localStorage.removeItem('student-user')
// }

const handleReportClick = () => {
  window.open('http://localhost:9091/report.html', '_blank');
};

</script>

<style>
.flex-grow {
  flex-grow: 1;
}
.el-container{
  height:100vh;
  overflow: hidden;
}
</style>

